<template>
	<uni-nav-bar  left-icon="left" fixed class="custom-nav-bar"  title="订单管理" :status-bar="true" background-color="rgb(246, 247, 248)" color="#000" :border='false'>
	</uni-nav-bar>
	<view class="ordermanagement">
		
		<view class="orderlist">
			<view class="" v-for="item in 10">
				<view class="" @click="dj">
					订单号2646663656154
				</view>
				<view class="">
					<view class="">
						<image src="/static/logo.png" mode=""></image>
						<text>轻上优选</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
					<view class="">
						待发货
					</view>
				</view>
				<view class="">
					<image src="/static/logo.png" mode=""></image>
					<view class="">
						<view class="">
							哪吒动漫可爱趣味周边哪吒钥匙扣高颜值挂件送朋友钥匙扣
						</view>
						<view class="">
							哪吒周边钥匙扣【随机一个】
						</view>
					</view>
					<view class="">
						<view class="">
							￥56.00
						</view>
						<view class="">
							x1
						</view>
					</view>
				</view>
				<view class="">
					<view class="">
						2025/02/21  17:05
					</view>
					<view class="">
						预计结算 <text>￥56.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const dj =()=>{
		wx.openStoreOrderDetail({
		    orderId: '3726381637176795904', // 订单 ID，必填
		    success(res) {
		        console.log('成功打开门店订单详情页', res);
		    },
		    fail(err) {
		        console.error('打开门店订单详情页失败', err);
		    },
		    complete() {
		        console.log('接口调用完成');
		    }
		});
	}
</script>

<style lang="scss" scoped>
	.ordermanagement{
		min-height: 100vh;
		background: rgb(246, 247, 248);
	}
	.orderlist{
		padding: 0 20rpx;
		box-sizing: border-box;
		padding-top: 30rpx;
		>view{
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			>view:nth-child(1){
				font-size: 26rpx;
				padding-bottom: 20rpx;
				border-bottom:  0.5px solid rgba(238, 238, 238, 1);
				margin-bottom: 36rpx;
			}
			>view:nth-child(2){
				display: flex;
				align-items:center;
				justify-content: space-between;
				margin-bottom: 34rpx;
				>view:nth-child(1){
					display: flex;
					align-items:center;
					>image{
						width: 48rpx;
						height: 48rpx;
						border-radius:50%;
						margin-right: 18rpx;
					}
					text{
						margin-right: 12rpx;
						font-size: 28rpx;
						font-weight: 700;
					}
				}
				>view:nth-child(2){
					font-size: 28rpx;
					font-weight: 700;
					font-weight: 700;
					color: rgba(255, 127, 6, 1);
				}
			}
			>view:nth-child(3){
				display: flex;
				align-items:center;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 25rpx;
				}
				>view:nth-child(2){
					width: 65%;
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					>view:nth-child(1){
						width:100%;
						font-size: 26rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}
					>view:nth-child(2){
						font-size: 26rpx;
						// font-weight: 500;
						color: rgba(153, 153, 153, 1);
					}
				}
				>view:nth-child(3){
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-end;
					>view:nth-child(1){
						font-size: 28rpx;
						font-weight: 500;
					}
					>view:nth-child(2){
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(106, 106, 106, 1);
					}
				}
				
			}
			>view:nth-child(4){
				display: flex;
				align-items:center;
				justify-content:space-between;
				padding-top: 40rpx;
				>view:nth-child(1){
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
				>view:nth-child(2){
					font-size: 26rpx;
					font-weight: 500;
					text{
						font-size: 38rpx;
						font-weight: 700;
			
					}
			
				}
			}
		}
	}
</style>